@extends('layouts.app-en')

@section('title', 'Product Detail')

@section('header')
    @include('layouts.header-en')
@stop
    <div class="wrapper-details-en">
        <div class="details">
            <div class="container">
                <div class="details-content">
                    <div class="details-slider">
                        <div class="row">
                            <div class="col-md-4">
                                <div id="carousel" class="carousel slide" data-ride="carousel">
                                    <div class="carousel-inner" role="listbox">
                                        @if($product->cover)
                                            @foreach($product->cover as $key => $value)
                                                <div class="item @if($key == 0) active @endif">
                                                    <img src="{{ asset('uploads/' . $value) }}" alt="">
                                                </div>
                                            @endforeach
                                        @endif
                                    </div>
                                    <ol class="carousel-indicators">
                                        @if($product->cover)
                                            @foreach($product->cover as $key => $value)
                                                <li data-target="#carousel" data-slide-to="{{ $key }}" @if($key == 0) class="active" @endif>
                                                    <img src="{{ asset('uploads/' . $value) }}" alt="">
                                                </li>
                                            @endforeach
                                        @endif
                                    </ol>
                                </div>
                            </div>
                            <div class="col-md-8">
                                <div class="details-slider-r">
                                    <h3>{{ $product->name }}</h3>
                                    <div class="declare">
                                        <span class="author">Author：<i>{{ $product->author }}</i>writer<i></i></span>
                                        <span class="publish-name">Press：<i>{{ $product->press }}</i></span>
                                        <div class="declareIcon">
                                            @foreach($product->resources as $key => $resource)
                                                <img src="{{ asset('uploads/' . $resource->icon_url) }}" alt="{{ $resource->name }}" />
                                            @endforeach
                                        </div>
                                    </div>
                                    <a href="{{ $product->buy_link }}" class="buy-btn">Buy Now</a>
                                    @if($product->remark)
                                        <span class="remarks">Remark：{{ $product->remark }}</span>
                                    @endif
                                    <div class="table-responsive">
                                        <table class="table">
                                            <tr>
                                                <td>Age Range：</td>
                                                <td>{{ $product->details->grade }}</td>
                                                <td>ISBN：</td>
                                                <td>{{ $product->details->isbn }}</td>
                                            </tr>
                                            <tr>
                                                <td>Package：</td>
                                                <td>{{ $product->details->package }}</td>
                                                <td>Number of Pages：</td>
                                                <td>{{ $product->details->pages }}</td>
                                            </tr>
                                            <tr>
                                                <td>Format：</td>
                                                <td>{{ $product->details->format }}</td>
                                                <td>Publication Date：</td>
                                                <td>{{ $product->details->date }}</td>
                                            </tr>
                                            <tr>
                                                <td>Paper：</td>
                                                <td>{{ $product->details->material }}</td>
                                                <td>Price：</td>
                                                <td>￥{{ $product->details->priced }}</td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="probation">
                        <div class="title">
                            <h3>content</h3>
                            <div class="line"></div>
                        </div>
                        @if($product->pictures)
                        <div class="pic-probation">
                            <div id="achievement-carousel" class="carousel slide achievement-carousel" data-pause="false">
                                <div class="carousel-inner" role="listbox">
                                    @foreach($product->pictures as $key => $picture)
                                        @if($key % 4  == 0)
                                            <div class="item @if ($key == 0)active @endif">
                                                <div class="row">
                                                    @endif
                                                    <div class="col-md-3">
                                                        <div class="achievement-img"><img src="{{ asset('uploads/' . $picture) }}" alt="" /></div>
                                                    </div>
                                                    @if($key % 4  == 3 || count($product->pictures) == $key+1)
                                                </div>
                                            </div>
                                        @endif
                                    @endforeach
                                </div>
                                <a class="left carousel-control" href="#achievement-carousel" role="button" data-slide="prev">
                                    <i class="carousel-icon-left"></i>
                                </a>
                                <a class="right carousel-control" href="#achievement-carousel" role="button" data-slide="next">
                                    <i class="carousel-icon-right"></i>
                                </a>
                            </div>
                        </div>
                        @endif

                        @if($product->tryout_audio && $product->tryout_audio->tryout)
                        <div class="audio">
                            <div class="row">
                                <div class="col-md-1">
                                    <div class="audio-img">
                                        @if($product->tryout_audio->cover)
                                            <img src="{{ asset('uploads/' . $product->tryout_audio->cover) }}" alt="">
                                        @else
                                            <img src="{{ asset('statics/images/icon_pic_two_exhibition.jpg') }}" alt=""/>
                                        @endif
                                    </div>
                                </div>
                                <div class="col-md-7">
                                    <h4>{{ $product->tryout_video->title }}</h4>
                                    <p>Format：{{ pathinfo($product->tryout_audio->tryout, PATHINFO_EXTENSION) }}</p>
                                </div>
                                <div class="col-md-4">
                                    <div class="audio-tab">
                                        <audio id="myaudio">
                                            <source src="{{ asset('uploads/' . $product->tryout_audio->tryout) }}">
                                            Your browser does not support playing audio in this format。
                                        </audio>
                                        <div class="controls clearfix">
                                            <div class="play-pause f_left" id="playPause">
                                                <i class="icon-btn icon-play"></i>
                                            </div>
                                            <span class="played-time f_left">00:00</span>
                                            <div class="pgs f_left">
                                                <div class="pgs-play" id="progress"></div>
                                                <img src="{{ asset('statics/images/icon_frequency_bookdetailpage.jpg') }}" alt="">
                                            </div>
                                            <span class="audio-time f_left" id="audioTime">0</span>
                                        </div>

                                    </div>

                                </div>
                            </div>
                        </div>
                        @endif

                        @if($product->tryout_video)
                        <div class="video">
                            <div class="row">
                                <div class="col-md-3">
                                    <div class="video-description">
                                        <h4>Video</h4>
                                        {{--<h5>Video</h5>--}}
                                        <p>Video available for the first 2 minutes</p>
                                    </div>
                                </div>
                                <div class="col-md-9">
                                    <div class="video-tab">
                                        @if($product->tryout_video->tryout)
                                        <video id="myvideo" controls="" width="100%" height="422">
                                            <source src="{{ asset('uploads/' . $product->tryout_video->tryout) }}">
                                            Your browser does not support playing video in this format。
                                        </video>
                                        @if($product->tryout_video->cover)
                                            <img id="videoImg" src="{{ asset('uploads/' . $product->tryout_video->cover) }}" alt="" />
                                        @endif
                                        <div id="videoShadow"></div>
                                        <i class="videoPlay" id="videoPlay"></i>
                                        @else
                                            {!! $product->tryout_video->external !!}
                                        {{--<!-----------if no video----------->--}}
                                        {{--<div class="noVideoTab">--}}
                                            {{--<div class="noVideo">--}}
                                                {{--<p><i></i>暂无视频资源</p>--}}
                                            {{--</div>--}}
                                        {{--</div>--}}
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endif
                        <div class="symmary">
                            <h4>Introduction</h4>
                            <div class="symmary_content">
                                <p>
                                    {!! $product->introduce !!}
                                </p>
                            </div>
                        </div>
                        <div class="symmary recomment">
                            <h4>Recommondation</h4>
                            <div class="symmary_content">
                                {!! $product->recommend !!}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @section('footer')
        @include('layouts.footer-en')
    @stop

    @section('script')
    <script src="{{ asset('statics/js/video.js') }}" ></script>
    <script>
        //---------- back top -------------//
        $("#scroll").click(function(){
            $('body,html').animate({scrollTop:0},500);
            return false;
        });
        //--------------------试读图片放大---------------------//
        $(".achievement-carousel .achievement-img").each(function(){
            $(this).click(function(){
                var bigImg="<div class='bgImgTab' id='bgImgTab'><div class='bgImgLay'></div><img src='' alt='' /></div>",
                    s=$(this).find("img").attr("src");
                $(".details").append(bigImg);
                $(".bgImgTab img").attr("src",s);
                $(".bgImgTab img").on("load",function(){
                    var w=$(".bgImgTab img").width(),
                        h=$(".bgImgTab img").height(),
                        l=w/2,
                        t=h/2;
                    $(".bgImgTab img").css({"margin-left":-l+"px","margin-top":-t+"px"});
                });
                $('body').css({"overflow-x":"hidden","overflow-y":"hidden"});
            })
        });
        $("body").on("click","#bgImgTab",function(){
            $(this).remove();
            $('body').css({
                "overflow-x":"auto",
                "overflow-y":"auto"
            });
        });

    </script>
    @stop